<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>只能发券详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button
                >
            </div>
            <el-descriptions title="" direction="vertical" :column="4" border size="small">
                <el-descriptions-item label="名称">
                    {{ couponMarketingDetail.name }}
                </el-descriptions-item>
                <el-descriptions-item label="过期时间">
                    {{ couponMarketingDetail.effectiveTime }}
                </el-descriptions-item>
                <el-descriptions-item label="总结">
                    {{ couponMarketingDetail.summary }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>发放记录</span>
            </div>
            <coupon-marketing-record size="small" :marketing-id="id"></coupon-marketing-record>
        </el-card>
    </div>
</template>

<script>
import CouponMarketingRecord from "@/component/CouponMarketingRecord";
import {getCouponMarketingById} from "@/api/api";

export default {
    name: "CouponMarketingDetailPage",
    components: {CouponMarketingRecord},
    data() {
        return {
            id: 0,
            couponMarketingDetail: {},
        }
    },
    methods: {
        getData() {
            getCouponMarketingById({"id": this.id}).then(data => {
                this.couponMarketingDetail = data.body;
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = parseInt(this.$route.query.id);
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
